<template>
  <div class="order">
    <div class="header">
      <div class="icon-lft">
        <image src="/src/static/images/function5.png" @click="goHome" class="icon-function" />
      </div>
      <div class="title">助力</div>
      <div class="icon-rgt"></div>
    </div>
   
    <div class="main-swiper-full">
      <image class="box-image" src="/src/static/images/1621589194423.png" />
      <!-- <div class="text">您的好友<br />{{ phone }}<br />邀请您助力抽奖</div> -->
      <div
        @click="zhuli"
        class="block bottom-btn mt-md mb-md"
        type="primary"
        style="background: rgb(255, 222, 80); color: rgb(255, 255, 255)"
        >为好友助力</div
      >
    </div>
    <div class="container">
      <div class="scroll-list" :style="{ animationDuration: infoList.length + 's' }">
        <div class="item" v-for="(item, index) in infoList" :key="index"
          ><span>{{ item.iphone }}</span
          ><span>{{ item.create_time }}</span></div
        >
      </div>
    </div>
    <u-popup :show="show" mode="center" @close="show = false">
      <view>
        {{ coin }}
      </view>
    </u-popup>

    <u-popup :show="loginShow" mode="center" @close="loginShow = false">
      <view class="popup-box">
        <view class="gro">
          <input placeholder="请输入手机号" v-model="mobile" />
        </view>
        <view class="gro">
          <input placeholder="请输入验证码" style="width: 60%" v-model="verify" />
          <text class="getcode" @click="getCode">获取验证码</text>
        </view>
      </view>
      <up-button type="primary" icon="map" text="图标按钮" @click="clickNoTokenZhuLi"
        >助力</up-button
      >
    </u-popup>
    <u-modal
      :show="audioShow"
      title="提示"
      showCancelButton
      closeOnClickOverlay
      @close="audioShow = false"
      @cancel="audioShow = false"
      @confirm="onConfirm"
    >
      <text>是否打开音乐</text>
    </u-modal>
  </div>
</template>

<script lang="ts" setup>
  import { inviteRedeemedShareCodeApi, helpShareApi } from '@/api/index';
  import { onLoad, onHide } from '@dcloudio/uni-app';
  import { ref, unref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { getCodeApi } from '@/api/login';



  const audioShow = ref(true);
  const audioContext = ref<any>(null);
  const currentAudio = ref<any>(null);
  const isPlay = ref(false);
  const userStore = useUserStore();
  const show = ref(false);
  const loginShow = ref(false);
  const redeemedPayload = ref<any>({});
  const coin = ref('');
  const mobile = ref('');
  const phone = ref('');
  const verify = ref('');
  const inviteCode = ref('');
  const infoList = ref<any>([]);
  function onConfirm() {
    clickPlay();
    audioShow.value = false;
  }
  function clickPlay() {
    isPlay.value = true;

    if (audioContext.value) {
      unref(audioContext).play();
    } else {
      audioContext.value = uni.createInnerAudioContext();
      currentAudio.value = unref(audioContext).src = userStore.getConfig.share_music_url;
      unref(audioContext).play();
    }
  }

  function clickPause() {
    isPlay.value = false;

    if (unref(audioContext)) {
      unref(audioContext).pause();
    }
  }

  onHide(() => {
    clickPause();
  });

  function getRedeemed() {
    inviteRedeemedShareCodeApi({ invite_code: inviteCode.value }).then((res) => {
      redeemedPayload.value = res;
      phone.value = res.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
      infoList.value = res.list.map((item) => ({
        iphone: item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
        create_time: dateStr(Date.parse(item.create_time)), // 假设 expire_time 是一个以秒为单位的时间戳
      }));
    });
  }

  function dateStr(date) {
    // 获取当前时间戳
    var now = new Date().getTime();

    // 计算时间差，单位为秒
    var diff = parseInt((now - date) / 1000);

    // 存储转换值
    var s;
    if (diff < 60 * 10) {
      return '刚刚助力成功';
    } else if (diff < 60 * 60) {
      s = Math.floor(diff / 60);
      return s + '分钟前助力成功';
    } else if (diff < 60 * 60 * 24) {
      s = Math.floor(diff / 60 / 60);
      return s + '小时前助力成功';
    } else if (diff < 60 * 60 * 24 * 3) {
      s = Math.floor(diff / 60 / 60 / 24);
      return s + '天前助力成功';
    } else {
      var dateObj = new Date(date);
      return (
        dateObj.getFullYear() +
        '/' +
        (dateObj.getMonth() + 1) +
        '/' +
        dateObj.getDate() +
        ' 助力成功'
      );
    }
  }
  function goHome() {
    uni.switchTab({
      url: '/pages/index/index',
    });
  }
  function getCode() {
    const data = { mobile: mobile.value };
    getCodeApi(data).then(() => {
      uni.showToast({
        title: '发送成功',
        icon: 'none',
      });
    });
  }

  function zhuli() {
    // if (userStore.getToken) {
    //   const data = { invite_code: inviteCode.value };

    //   helpShareApi(data).then(() => {
    //     uni.showToast({
    //       title: '助力成功',
    //       icon: 'none',
    //     });
    //   });
    // } else {
    loginShow.value = true;
    // }
  }

  function clickNoTokenZhuLi() {
    const data = { invite_code: inviteCode.value, mobile: mobile.value, verify: verify.value };

    helpShareApi(data).then((res) => {
      uni.showToast({
        title: '助力成功',
        icon: 'none',
      });
      loginShow.value = false;

      //判断有没有登录
      if(!userStore.getToken){
         let token = res.data?.token
         if(token){
            userStore.setToken(token);
         }
      }

      uni.switchTab({url:"/pages/index/index"});
    });
  }

  onLoad((code) => {
    inviteCode.value = Object.keys(code as any)[0];
    getRedeemed();
  });
</script>

<style scoped lang="less">
  .order {
    height: 100%;
    position: relative;
    background-image: url(/src/static/images/share_bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .header{
      width: 100%;
      display: flex;
      .icon-lft{
        width: 38px;
        padding: 10px 0 0 10px;
      }
      .icon-rgt{
        width: 38px;
        padding: 10px 10px 0 0px;
      }
      .title{
        flex:1;
        text-align: center;
        height: 38px;
        line-height: 38px;
        padding: 10px 0 0 0;
        color: #fff;
        font-size: 16px;
      }
    }
    .icon-function {
      width: 38px;
      height: 38px;
      transform: rotate(180deg);
    }

    .text {
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    .container {
      margin-top: 20px;
      overflow: hidden;
      height: 70px;
    }

    .scroll-list {
      animation: scroll linear infinite;
      display: flex;
      flex-direction: column;
    }

    .item {
      color: #fff;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    @keyframes scroll {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-100%);
      }
    }

    .main-swiper-full {
      width: 100%;

      box-sizing: border-box;
      border-radius: 5px;
      margin: auto;
      text-align: center;

      .box-image{
        position: absolute;
        top: 150px;
        left: 50%;
        margin-left: -160px ;
      }

      .block {
        position: absolute;
        width: 234px;
        height: 45px;
        left: 50%;
        margin-left: -117px;
        border-radius: 45px;
        line-height: 45px;
        bottom: 10%;
      }
    }

    :deep(.u-popup__content) {
      padding: 20rpx;
      background-color: #ffde61 !important;
      border-radius: 20rpx;
    }
  }

  .gro {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 27px 0 10px;
    border-bottom: 1px solid #ccc;

    uni-input {
      width: 100%;
      font-size: 14px;
    }

    .getcode {
      font-size: 14px;
      color: #323232;
    }
  }
</style>
